<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :init-param="initParam">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-if="BUTTONS.add" type="primary" :icon="CirclePlus" @click="openDrawer('新增')"> 新增 </el-button>
        <el-button v-if="BUTTONS.export" type="primary" :icon="Download" plain @click="downloadFile">导出数据</el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)">查看</el-button>
        <el-button v-if="BUTTONS.edit" type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
        <el-button v-if="BUTTONS.delete" type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
      </template>
    </ProTable>
    <DetailDrawer ref="drawerRef" />
    <ImportExcel ref="dialogRef" />
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { ref, reactive } from "vue";
import { ExportObj, RestApi } from "@/api/types/base";
import { useHandleData } from "@/hooks/useHandleData";
import { useDownload } from "@/hooks/useDownload";
import { ElMessageBox } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import DetailDrawer from "./detailDrawer.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, Download, View } from "@element-plus/icons-vue";
import apiService from "@/api/services/apiService";
import { useDateFormat } from "@vueuse/core";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { ExportColType } from "@/enums/sysEnum";

const initVar = reactive({
  tbName: "restApi",
  tbCnName: "接口管理"
});

// ProTable 实例
const proTable = ref<ProTableInstance>();
const { BUTTONS } = useAuthButtons();

const initParam = reactive({
  // user_id: userStore.userInfo._id
});

const getTableList = (params: any) => {
  return apiService.findPage(initVar.tbName, params.condition, params.options);
};

// 表格配置项
const columns = reactive<ColumnProps<RestApi>[]>([
  { type: "index", label: "序号", width: 85 },
  { prop: "methodName", label: "方法名", width: 220, search: { el: "input", like: true } },
  { prop: "desc", label: "方法说明", width: 260, search: { el: "input", like: true } },
  { prop: "methodType", label: "方法类型", width: 100 },
  { prop: "fullPath", label: "接口全路径", search: { el: "input", like: true } },

  // { prop: "packageName", label: "包名", width: 180, search: { el: "input", like: true } },
  // { prop: "className", label: "类名", width: 120, search: { el: "input", like: true } },
  // { prop: "fullCalssName", label: "全类名", width: 200, align: "left" },
  { prop: "serverName", label: "服务名称", width: 160, search: { el: "input", like: true } },
  // { prop: "methodPath", label: "方法路径", width: 85 },
  // { prop: "classPath", label: "类路径", width: 85 },

  { prop: "state", label: "状态", width: 100 },
  // { prop: "create_at", label: "创建时间", width: 100 },
  // { prop: "create_user", label: "创建人", width: 200 },
  { prop: "operation", label: "操作", align: "left", fixed: "right", width: 240 }
]);

// 删除信息
const deleteAccount = async (params: RestApi) => {
  await useHandleData(apiService.deleteById, initVar.tbName, params._id, `删除【${params.methodName}】`);
  proTable.value?.getTableList();
};

const getExcelConfig = (): ExportObj => {
  return {
    params: proTable.value?.totalParam,
    tableName: initVar.tbName,
    keyPropName: "classPath",
    enumTypes: [],
    tableConfigs: [],
    header: [
      { header: "序号", width: 6, ext: { prop: "index", type: ExportColType.INDEX } },
      { header: "服务名称", width: 16, ext: { prop: "serverName", type: ExportColType.DEFAULT } },
      { header: "包名", width: 16, ext: { prop: "packageName", type: ExportColType.DEFAULT } },
      { header: "类名", width: 10, ext: { prop: "className", type: ExportColType.DEFAULT } },
      { header: "全类名", width: 40, ext: { prop: "fullCalssName", type: ExportColType.DEFAULT } },
      { header: "方法名", width: 8, ext: { prop: "methodName", type: ExportColType.DEFAULT } },
      { header: "方法路径", width: 8, ext: { prop: "methodPath", type: ExportColType.DEFAULT } },
      { header: "类路径", width: 8, ext: { prop: "classPath", type: ExportColType.DEFAULT } },
      { header: "全路径", width: 8, ext: { prop: "fullPath", type: ExportColType.DEFAULT } },
      { header: "方法类型", width: 8, ext: { prop: "methodType", type: ExportColType.DEFAULT } },
      { header: "方法说明", width: 8, ext: { prop: "desc", type: ExportColType.DEFAULT } },
      { header: "状态", width: 8, ext: { prop: "state", type: ExportColType.DEFAULT } },
      { header: "创建时间", width: 8, ext: { prop: "create_at", type: ExportColType.DEFAULT } },
      { header: "创建人", width: 30, ext: { prop: "create_user", type: ExportColType.DEFAULT } }
    ]
  };
};

// 导出数据
const downloadFile = async () => {
  ElMessageBox.confirm("确认导出数据?", "温馨提示", { type: "warning" }).then(() =>
    useDownload(apiService.commonExport, `接口清单-${useDateFormat(new Date(), "YYYY-MM-DD").value}`, "", getExcelConfig(), false)
  );
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof DetailDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<RestApi> = {}) => {
  const params = {
    title,
    tbName: initVar.tbName,
    isView: title === "查看",
    row: row,
    api: title.indexOf("新增") !== -1 ? apiService.save : title === "编辑" ? apiService.updateById : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
</script>
